<template>
  <div class="pickcity">
    <div class="left">
      <li v-for="item in province" v-bind:key="item.id" @click="showcity(item.ProID)">{{item.name}}</li>
    </div>
    <div class="right">
      <li v-for="item in city" v-bind:key="item.id" v-show="item.ProID == ProID">{{item.name}}</li>
    </div>
    <div class="bottom"></div>
    <router-link to="/job" class="submit">确认</router-link>
    <router-link to="/job" class="cancel">取消</router-link>
    
  </div>
</template>

<script>
import "animate.css";
import province from "../data/province.json";
import city from "../data/city.json";

export default {
  data() {
    return {
      province: province,
      city: city,
      ProID: "2"
    };
  },
  created() {},
  methods: {
    showcity(ProID) {
      this.ProID = ProID;
      // console.log(123)
    }
  }
};
</script>

<style lang="scss" scoped>
a{
  text-decoration: none;
}
.pickcity {
  // position: relative;
  .left,
  .right {
    position: relative;
    display: inline-block;
    width: 49.5vw;

    li {
      width: 49.5vw;
      height: 5vh;
      color: #555555;
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;
      
    }
   
  }
  .left{
    border-right: 1vw solid #dddddd;

  }
  .right{
    position: absolute;
  }
  .submit,
  .cancel {
    width: 50vw;
    height: 10vh;
    position: fixed;
    bottom: 10vh;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    background: greenyellow;
  }
  .submit{
    right: 0;
  }
  .cancel {
    left: 0; 
  }
  .bottom{
    // position: relative;
    width: 100vw;
    height: 20vh;
    // border: 1px solid red;

  }
}
</style>